<!--
 @description 立面问题信息新增
 @fileName Add.vue
 @author zengqiongying
 @created 2023/06/14 13:34:56
-->
<template>
  <Popup
    v-model="showPop"
    :title="popTitle"
    position="bottom"
    :showCancelButton="false"
    closeable
    @confirm="onConfirm"
    @cancel="onCancel"
  >
    <div class="pad16 from-container">
      <div class="field-cell">
        <div class="title">项目性质</div>
        <LabelSelect
          v-model="formData.projectNature"
          placeholder="请选择"
          label-name="attributeValue"
          value-name="attributeValue"
          url="/app/TaskManage/GetDataDictionary"
          :params="{ query: { code: acceptMold.indexOf('soft') > -1 ? 'RZXMXZ' : 'YZXMXZ' }, type: 0 }"
          :column="2"
          method="get"
          clear
          hid-title
          inputAlign="left"
          cellClassName="item-field"
        />
      </div>
      <div class="field-cell">
        <div class="title">问题属性</div>
        <LabelSelect
          v-model="formData.problemProperty"
          placeholder="请选择"
          label-name="attributeValue"
          value-name="attributeValue"
          url="/app/TaskManage/GetDataDictionary"
          :params="{ query: { code: acceptMold.indexOf('soft') > -1 ? 'RZWTSX' : 'YZWTSX' }, type: 0 }"
          :column="2"
          method="get"
          clear
          hid-title
          inputAlign="left"
          cellClassName="item-field"
        />
      </div>
      <div v-if="formData.problemProperty" class="field-cell">
        <div class="title">问题类别</div>
        <template v-if="acceptMold.indexOf('soft') === 0 && formData.problemProperty === '软装'">
          <!-- 软装：问题属性为“软装”时，才选择问题类别，其他均不可选择问题类别 -->
          <LabelSelect
            v-model="formData.problemPropertyPattern"
            placeholder="请选择"
            label-name="attributeValue"
            value-name="attributeValue"
            url="/app/TaskManage/GetDataDictionary"
            :params="{ query: { code: 'RZWTLB' }, type: 0 }"
            :column="2"
            method="get"
            clear
            hid-title
            inputAlign="left"
            cellClassName="item-field"
          />
        </template>
        <template v-if="acceptMold.indexOf('hard') === 0 && formData.problemProperty !== '争议项'">
          <!-- 硬装：问题类型与问题属性相关联,关联规则见 CategoryMap -->
          <!-- url="/app/TaskManage/GetDataDictionary"
            :params="{ query: { code: 'YZWTLB' }, type: 0 }" -->
          <LabelSelect
            v-model="formData.problemPropertyPattern"
            placeholder="请选择"
            label-name="attributeValue"
            value-name="attributeValue"
            :optionData="categroyList"
            :column="2"
            method="get"
            clear
            hid-title
            inputAlign="left"
            cellClassName="item-field"
          />
        </template>
      </div>
      <div class="field-cell">
        <div class="title">图片名称</div>
        <qmp-field v-model="formData.imgCustomName" placeholder="输入内容" class="ctm-text-field" clearable />
      </div>
      <div class="field-cell">
        <div class="img-list">
          <div class="check-image-item">
            <div class="img-container">
              <CheckImage
                v-model="formData.sysFileUrl"
                v-model:imageName="formData.imgOriginName"
                :caid="facadeDetail.acceptID"
              />
            </div>
            <div class="name">整改前</div>
          </div>
          <div class="check-image-item">
            <div class="img-container">
              <CheckImage
                v-model="formData.afterSysFileUrl"
                v-model:imageName="formData.imgOriginName"
                :caid="facadeDetail.acceptID"
              />
            </div>
            <div class="name">已整改</div>
          </div>
        </div>
      </div>
    </div>
  </Popup>
</template>

<script lang="ts">
  import Popup from '@/components/Popup/index.vue'
  import LabelSelect from '@/components/LabelSelect/index.vue'
  import CheckImage from '@/views/components/CheckImage/index.vue'
  import { reactive, toRefs, getCurrentInstance, computed, watch, nextTick, defineComponent } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { IAnyKeyObject } from '@/types/common'
  import { saveFacadeFile } from '@/apis/Facade'
  import { initFormData } from '@/utils'
  import { getCookieProblem, setCookieProblem } from '@/utils/auth'
  import CategoryMap from './CategoryMap'
  export default defineComponent({
    name: 'FacadeFileAdd',
    components: { Popup, LabelSelect, CheckImage },
    props: {
      facadeDetail: {
        // 立面详情
        type: Object,
        default: () => {}
      },
      detail: {
        type: Object,
        default: () => {}
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    setup(props, { emit }) {
      const instance = getCurrentInstance()
      const { proxy }: any = instance
      const $route = useRoute()

      const datas = reactive<IAnyKeyObject>({
        showPop: true,
        acceptMold: $route.query.acceptMold, // 验收类型：softCheck  软装，  hardCheck 硬装
        formData: {
          acceptID: '', // 验收记录ID
          amid: '', //验收模块ID
          sfid: '', // 立面ID
          ffid: '', // 问题ID
          projectNature: '', // 项目性质
          problemProperty: '', // 问题属性(一级分类)
          problemPropertyPattern: '', //问题类别(二级分类)
          imgOriginName: '', //图片原始名称
          imgCustomName: '', //图片自定义名称
          sysFileUrl: '', //图片地址
          afterSysFileUrl: '' //整改后图片地址
        }
      })
      const showPop = computed({
        set(val) {
          emit('update:show', val)
        },
        get() {
          return props.show
        }
      })
      const popTitle = computed(() => {
        if (props.detail.ffid) {
          return `编辑问题`
        }
        return '新增问题'
      })
      const categroyList = computed(() => {
        if (
          datas.acceptMold.indexOf('hard') !== 0 ||
          !datas.formData.problemProperty ||
          datas.formData.problemProperty === '争议项'
        ) {
          return []
        }
        const property = datas.formData.problemProperty
        return CategoryMap[property] || []
      })

      watch(
        () => props.detail,
        (val) => {
          refreshFormData(val)
        },
        {
          deep: true
        }
      )
      watch(
        () => showPop.value,
        (val) => {
          if (val) {
            refreshFormData(props.detail)
          }
        }
      )
      watch(
        () => datas.formData.problemProperty,
        (val) => {
          if (!val || val === '争议项') {
            datas.formData.problemPropertyPattern = ''
          }
        }
      )
      // 刷新表单数据
      const refreshFormData = (d: any) => {
        if (Object.keys(d).length > 0) {
          initFormData(d, datas.formData)
        } else {
          const type = datas.acceptMold.indexOf('soft') === 0 ? 'soft' : 'hard'
          let defaultProjectNature = type === 'soft' ? '经销商责任' : '施工单位责任'
          let defaultProblemProperty = type === 'soft' ? '软装' : '立面'
          const cookieProblem = getCookieProblem(type)
          if (cookieProblem) {
            if (cookieProblem.projectNature) {
              defaultProjectNature = cookieProblem.projectNature
            }
            if (cookieProblem.problemProperty) {
              defaultProblemProperty = cookieProblem.problemProperty
            }
            if (cookieProblem.problemPropertyPattern) {
              datas.formData.problemPropertyPattern = cookieProblem.problemPropertyPattern
            }
          }
          datas.formData.projectNature = defaultProjectNature
          datas.formData.problemProperty = defaultProblemProperty
        }
      }

      const onConfirm = () => {
        const { acceptID, sfid, amid } = props.facadeDetail
        const data = {
          ...datas.formData,
          ...{
            acceptID,
            sfid,
            amid
          }
        }
        if (!data.projectNature) {
          proxy.$toast('请选择项目性质')
          return
        }
        if (!data.problemProperty) {
          proxy.$toast('请选择问题属性')
          return
        }
        if (datas.acceptMold.indexOf('soft') === 0) {
          // 仅问题属性为 软装 时，允许选择问题类别
          if (data.problemProperty !== '软装') {
            data.problemPropertyPattern = ''
          } else {
            if (!data.problemPropertyPattern) {
              proxy.$toast('请选择问题类别')
              return
            }
          }
        } else {
          // 问题属性不为“争议项”时，选择问题类别
          if (data.problemProperty === '争议项') {
            data.problemPropertyPattern = ''
          } else {
            if (!data.problemPropertyPattern) {
              proxy.$toast('请选择问题类别')
              return
            }
          }
        }
        if (!data.imgCustomName) {
          proxy.$toast('请输入图片名称')
          return
        }
        if (!data.sysFileUrl) {
          proxy.$toast('请上传整改前的图片')
          return
        }

        saveFacadeFile(data).then((res: any) => {
          setProblemData()
          proxy.$toast('操作成功')
          nextTick(() => {
            showPop.value = false
            emit('success')
          })
        })
      }
      // 保存项目属性类别/性质
      const setProblemData = () => {
        const { projectNature, problemProperty, problemPropertyPattern } = datas.formData
        const key = datas.acceptMold.indexOf('soft') === 0 ? 'soft' : 'hard'
        setCookieProblem(key, {
          projectNature,
          problemProperty,
          problemPropertyPattern
        })
      }
      const onCancel = () => {
        const data = { ...datas.formData }
        for (let key in data) {
          data[key] = ''
        }
        datas.formData = data
      }

      return {
        ...toRefs(datas),
        categroyList,
        showPop,
        popTitle,
        onConfirm,
        onCancel
      }
    }
  })
</script>
<style lang="less" scoped>
  .pad16 {
    padding: 0 16px 24px;
  }
  .from-container {
    max-height: 70vh;
    overflow-y: auto;
  }
  .field-cell {
    margin-bottom: 16px;
    .title {
      font: var(--font-main-body);
      color: var(--texticon-default-stronger);
      margin-bottom: 16px;
    }
    /deep/ .item-field {
      background: var(--input-bg-disable);
      border: 1px solid var(--input-line-active);
      border-radius: var(--radius-xl);
    }
  }

  .img-list {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .check-image-item {
    .img-container {
      position: relative;
      width: 161px;
      height: 110px;
    }
    .name {
      margin-top: 8px;
      font: var(--font-main-body);
      color: var(--texticon-default-normal);
      text-align: center;
    }
  }
</style>
